<template>
  <div class="subscription-status">
    <h2>当前订阅状态</h2>
    <div v-if="subscription">
      <p>会员等级：<strong>{{ subscription.plan.name }}</strong></p>
      <p>白名单数量：<strong>{{ subscription.plan.whitelistLimit }}</strong></p>
      <p>有效期至：<strong>{{ formatDate(subscription.expiresAt) }}</strong></p>
    </div>
    <div v-else>
      <p>您尚未订阅任何会员等级。</p>
    </div>
    <router-link to="/subscription">前往升级</router-link>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import axios from 'axios';

const subscription = ref(null);

onMounted(async () => {
  try {
    const res = await axios.get('/api/subscriptions/test_user');
    subscription.value = res.data;
  } catch (err) {
    console.error('获取订阅信息失败:', err);
  }
});

const formatDate = (date) => {
  return new Date(date).toLocaleDateString();
};
</script>

<style scoped>
.subscription-status {
  padding: 20px;
}
</style>